<template>
  <div class="login">
    <el-row >
      <el-col :span="14" :offset="4">
        <el-card class="box-card">
          <span class="header">会员登录</span>
          <el-divider></el-divider>
          <el-form ref="form" :model="form">
            <el-form-item label="用户名" style="font-size:10px;">
              <el-input v-model="form.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" style="font-size:10px">
              <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
          </el-form>
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
<!--              <el-link :underline="false" href>忘记密码</el-link>-->
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">
              <nuxt-link to="/register/register" >用户注册</nuxt-link>
            </el-col>
          </el-row>
          <el-button type="danger" @click="btnLogin" style="width:400px;margin-top:10px">登录</el-button>
        </el-card>
      </el-col>
      <!--<el-col :span="2" :offset="4">
        <div class="right">
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="购物车">
            <el-button slot="reference"><i class="el-icon-shopping-cart-2"></i></el-button>
          </el-popover>
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="会员中心">
            <el-button slot="reference"><i class="el-icon-user-solid"></i></el-button>
          </el-popover>
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            content="商品对比">
            <el-button slot="reference"><i class="el-icon-set-up"></i></el-button>
          </el-popover>
          <el-popover
            placement="top-start"
            width="150"
            trigger="hover"
            content="收藏列表">
            <el-button slot="reference"><i class="el-icon-star-on"></i></el-button>
          </el-popover>
        </div>
      </el-col>-->
    </el-row>
  </div>

</template>
<script>
  import * as LoginRequest from '../../assets/login/login'

  export default {
    data() {
      return {
        visible: false,
        form:{
          username: '',
          password: ''
        }
      }
    },
    methods: {
      async btnLogin(){
        await LoginRequest.getJWTToken(this,this.form);
        //await LoginRequest.getUserInfo(this,this.form);

      }
    }
  };
</script>

<style lang="less">
  .login {
    margin-top: -30px !important;
    height: 100vh;
    background-color: #fff;
    background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589301312710&di=266988d1d0eb64d026023ae6c0f79b0e&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fu%2F00%2F28%2F77%2F06%2F55fb624d04cb6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    a{
      text-decoration: none;
      color: #000000;
    }
    .right {
      float: right;
      width: 60px;
      margin-top: 150px;
    }

    .box-card {
      margin-top: 75px;
      margin-left: 750px;
      width: 450px;
    }

    .header {
      font-size: 27px;
    }

    .forget {
      font-size: 15px;
    }

    .el-input__inner:hover {
      border-color: red;
    }
  }


</style>
